<template>
    <div>
        <el-form :model="searchForm" :inline="true" class="forTbFilter">
            <el-form-item label="标题：">
                <el-input v-model.trim="searchForm.searchTitle" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAgentNotifyListPageHandle">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tbpg.tableData" border height="611">   
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="createNickname" label="发布人"></el-table-column>
            <el-table-column prop="currentTime" label="发布时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showNotifyDetail(scope.row)">查看</el-button>
                    <el-button type="text" size="small" @click="deleteNotifyHandle(scope.row.id)">删除</el-button>
                </template>    
            </el-table-column>
        </el-table>       
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tbpg.currentPage"
            :page-sizes="[15, 50, 100, 500]"
            :page-size="tbpg.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbpg.total">
        </el-pagination>  

        <el-dialog title="查看公告" :visible.sync="notifyDetailVisibale" width="600px" class="notifyDetail" :close-on-click-modal="false">
            <h3>{{ title }}</h3>
            <p v-html="content"></p>
        </el-dialog>       
    </div>
</template>
<script>
import {getAgentNotifyListPage, agentDeleteNotify} from '@/api/system.js'
import common from '@/utils/common.js'
export default {
    data(){
        return {
            searchForm: {
                searchTitle: ''
            },
            tbpg: {
                tableData: [],
                currentPage: 1,
                pageSize: 15,
                total: 0
            },            
            title: '',
            content: '',
            notifyDetailVisibale: false            
        }
    },
    methods: {
        getAgentNotifyListPageHandle($event){
            common.resetCurrentPage(this, $event, 'tbpg');
            var data = common.getRequestParams(this, 'tbpg', this.searchForm);
            getAgentNotifyListPage(data).then(res => {
                common.listCallback(this, res, 'tbpg'); 
            })
        },
        showNotifyDetail(row){
            this.title = row.title;
            this.content = row.content.replace(/\n/g, '<br>');
            this.notifyDetailVisibale = true;
        },
        deleteNotifyHandle(id){
            this.$confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                agentDeleteNotify({id}).then(res => {
                    if(res.data.code == 200){
                        this.$message.success(res.data.message);
                        this.getAgentNotifyListPageHandle();
                    }
                })
            }).catch(() => {
                
            })
        },
        handleSizeChange(val){
            this.tbpg.pageSize = val;
            this.getAgentNotifyListPageHandle();
        },
        handleCurrentChange(val){
            this.tbpg.currentPage = val;
            this.getAgentNotifyListPageHandle();
        }  
    },
    created () {
        this.getAgentNotifyListPageHandle()
    } 
}
</script>
<style lang="scss">
.notifyDetail {
    h3 {
        text-align: center;
        margin-bottom: 10px;
    }
    p {
        text-indent: 2em;
        line-height: 1.5em;
    }
}
</style>

